<template>
  <div class="layoutCon">
    <service-header :tab="3"></service-header>
    <div class="breadcrumb">
      <router-link class="home" to="/"></router-link> > <router-link to="/service">고객센터</router-link> > 질문과답변
    </div>
    <div class="frmBox">
      <el-form :model="frm" :rules="rules" ref="qaFrm">        
        <ul>
          <li>
            <el-form-item prop="title">
              <el-input v-model="frm.title" placeholder="*제목"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item prop="cont">
              <summernote @checkCon="checkCon"></summernote>
            </el-form-item>
          </li>
          <li class="btns">
            <el-button :loading="isLoading" type="primary" @click="submitForm">작성완료</el-button>
            <el-button class="btn" @click="escFrm">작성취소</el-button>
          </li>
        </ul>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { addQA,uploadImg } from '@/api';
import Summernote from '@/components/summernote'
import serviceHeader from '@/components/serviceHeader';

export default {
  name:'',
  components:{serviceHeader,Summernote},
  props:[],
  data(){
    return {
      isLoading:false,
      frm:{
        title:'',        
        cont:'',
      },
      rules:{
        title: [
          { required: true, message: '제목을 작성해 주세요. ', trigger: 'blur' }
        ],
        cont: [
          { required: true, message: '내용을 작성해 주세요.', trigger: 'blur' }
        ],          
      },    
    }
  },
  computed:{
    ...mapState(['token'])
  },
  created(){},
  mounted(){},
  methods:{
    submitForm() {
        this.frm.cont=$('#summernote').summernote('code');
        this.$refs['qaFrm'].validate( async (valid,error) => {
          if (valid) {
            let res = await addQA(this.frm);
            this.isLoading = true;
            if (res.code == 200) {
              this.$alert('질문이 정상적으로 등록되었습니다.', ' ', {
                confirmButtonText: '확인',
                callback: action => {
                  this.back();
                }
              });
              this.isLoading = false;
            }else{
              this.isLoading = false;
            }
          } else {
            return false;
          }
        });
    },
    escFrm(){
      this.$confirm('취소 하시면, 기존에 작성된 내용이 모두 삭제됩니다.', '작성취소', {
        confirmButtonText: '확인',
        cancelButtonText: '취소',
      }).then(() => {
        this.back();
      });
    },
    back(){
      this.$router.back()
    },
    checkCon(){
      this.frm.cont=$('#summernote').summernote('code');
      this.$refs.qaFrm.validateField('cont');
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/service.scss";
</style>